iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
Modern Web

探索HTML 與 CSS 的動態魔法系列 第 26

Day26 - 圖片形狀轉換效果

  • 分享至 

  • xImage
  •  

這篇文章要介紹,如何使用使用 mask-imageclip-path 創建圖片從一種形狀逐漸轉換為另一種形狀的效果

HTML

創建一個 image-container 的容器,包含兩張圖片

<div class="image-container">
    <div class="image image1">
        <img src="picture1.jpeg" alt="Image 1">
    </div>
    <div class="image image2">
        <img src="picture2.png" alt="Image 2">
    </div>
</div>

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中顯示,確保圖片位於畫面正中間

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   background: white;
}

2. 圖片容器和圖片的基礎樣式

.image-container {
   display: flex;
   width: 600px; 
   height: 300px;
   overflow: hidden; 
}

.image {
   position: relative; 
   width: 50%; 
   height: 100%;
   transition: mask-image 3s ease-in-out, opacity 3s ease-in-out; 
}
  • image-container : 設定圖片容器的大小
  • overflow : 確保圖片超出容器的部分不會顯示
  • image : 設定每張圖片的寬度、高度和過渡效果
  • transition : 設置 mask-imageopacity 的變化時間為 3 秒,並使用 ease-in-out 實現平滑的過渡效果

3. 初始形狀和透明度

.image1 {
   mask-image: radial-gradient(circle at center, black 50%, transparent 51%); 
   z-index: 1;
}

.image2 {
   mask-image: none; 
   z-index: 0;
   opacity: 0; 
}
  • mask-image : 定義圖片的遮罩形狀
    • radial-gradient : 設定 .image1 為圓形
    • black 50% : 表示顯示部分
    • transparent 51% : 表示透明部分
  • image2 : 初始設定為 none,表示不會應用任何遮罩形狀
    • 透明度 (opacity) : 設為 0,在一開始不顯示

4. 當懸停時觸發的過渡效果

將滑鼠懸停在 .image-container 上時,圖片會從一張轉換為另一張,並且形狀從方形變為圓形

.image-container:hover .image1 {
   mask-image: none; 
   opacity: 0; 
}

.image-container:hover .image2 {
   mask-image: radial-gradient(circle at center, black 50%, transparent 51%); 
   opacity: 1; 
}
  • 第一張圖片 : 原本顯示為圓形
    • 懸停時 : mask-image 變為 none,表示圖片回復為完整顯示的方形
    • opacity : 設為 0,讓圖片逐漸消失
  • 第二張圖片 : 原本是隱藏的
    • 懸停時,mask-image 會變為圓形
    • opacity : 設為 1,讓圖片逐漸顯示並以圓形的方式呈現
  • transition : 設定過渡效果,讓兩張圖片在 3 秒內慢慢互換

5. 圖片適應容器

.image img {
   width: 100%; 
   height: 100%; 
   object-fit: cover; 
}
  • object-fit : 確保圖片在容器內被裁剪並保持比例,同時不會變形,可以讓圖片更好適應容器的大小

結果呈現

動畫


上一篇
Day25 - 3D立體字母
下一篇
Day27 - 3D旋轉木馬效果
系列文
探索HTML 與 CSS 的動態魔法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言